<!DOCTYPE html>
<html>
<head>
<!-- 	<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css"> -->

  <link rel="stylesheet" href="../../static/css/font-awesome.4.6.0.css">

	<link href="../../static/css/froala_editor.min.css" rel="stylesheet" type="text/css">


    <style>
        body {
            text-align: center;
            background-color: #d0c0c0;
        }

        section {
            width: 80%;
            margin: auto;
            text-align: left;
        }

    </style>
</head>

<body>
   <br/>
    <br/>
    <h2 style="text-align: center;"> &emsp;  &emsp;  <input type="text" id="news_title" style="color: #000;" value="文章标题请写在这里~"></h2>
    <br/>
    <br/>
  <div style="text-align: center;">新闻主图片请在这里选择：<input type="file" id="news_image" accept="image/*"/><input type="hidden" id="news_image_url" value=""/></div>

  <section id="editor">
      <div id='edit' style="margin-top: 30px;">


          <h1>新闻内容请写在这里~</h1>

          
      </div>
  </section>
    <br/>
    <br/>
  
  <div> <h3 style="color: red"> 请选择新闻的类型(可选) </h3></div>
  <div><select class="addselect" style="color: #000;"><option style="color: #000;" value ="0">默认</option><option style="color: #000;" value ="1">游戏</option><option  style="color: #000;" value="2">赛事</option></select><input type="hidden" class="add_type_id" value="1"/> &emsp;  &emsp; &emsp; 
    <select class="addselect_datail" style="color: #000;"><option style="color: #000;" value ="0">默认</option></select><input type="hidden" class="add_type_detail" value="1"/>
  </div>
  <br/>
  <br/>

  <div style="text-align: center;"><button type="button" id="show_news" style="background-color: #009688;border: none;color: #fff; width:80px;height:38px">提交</button>&emsp;  &emsp; <button type="button" id="turnback" style="background-color: #009688;border: none;color: #fff; width:80px;height:38px">返回</button></div>
<script src="../../static/js/jquery-1.10.2.js"></script>
  <script src="../../static/js/froala_editor.min.js"></script>
  <!--[if lt IE 9]>
    <script src="../js/froala_editor_ie8.min.js"></script>
  <![endif]-->
  <script src="../../static/js/plugins/tables.min.js"></script>
  <script src="../../static/js/plugins/lists.min.js"></script>
  <script src="../../static/js/plugins/colors.min.js"></script>
  <script src="../../static/js/plugins/media_manager.min.js"></script>
  <script src="../../static/js/plugins/font_family.min.js"></script>
  <script src="../../static/js/plugins/font_size.min.js"></script>
  <script src="../../static/js/plugins/block_styles.min.js"></script>
  <script src="../../static/js/plugins/video.min.js"></script>

  <script>
	$(function(){
	  $('#edit').editable({inlineMode: false, alwaysBlank: true})
	});
	


    // $.ajax({
    //     url:"/app/load/banner_type_detail?id=1",
    //     dataType:"json",
    //     success:function(res){
    //         if(res.status == 0){
    //             $(".addselect_datail").empty();                                
    //             $.each(res.data,function(i,item){
    //                 $(".addselect_datail").append('<option style="color: #000;" value ="'+item.id+'">'+item.title+'</option>');
                    
    //             });

    //         }else {
    //             alert(res.msg);
    //         }
    //     }
    // });


    $(".addselect").on("click",function(){
      var add_type_id = $(".addselect option:selected").val();
      $(this).next().val(add_type_id);

      if(add_type_id != 0){
        $.ajax({
            url:"/app/load/banner_type_detail?id="+add_type_id,
            dataType:"json",
            success:function(res){
                if(res.status == 0){
                  
                    $(".addselect_datail").empty();

                    $.each(res.data,function(i,item){
                                $(".addselect_datail").append('<option style="color: #000;" value ="'+item.id+'">'+item.title+'</option>');
                            });
    
                }else {
                    alert(res.msg);
                }
            }
        })
    }else{
      $(".addselect_datail").empty();
      $(".addselect_datail").append('<option style="color: #000;" value ="0">默认</option>');
    }


  });
  

	
	$("#news_image").change(function(){
        var imageurl = $(this).next();
        var file = this.files[0];
        if (window.FileReader) {
                var reader = new FileReader();
                reader.readAsDataURL(file);
                //监听文件读取结束后事件
              reader.onloadend = function (e) {
                imageurl.val(e.target.result);    //e.target.result就是最后的路径地址
                };
           }
    });
	
	$("#show_news").on("click",function(){

		console.log($(".froala-element").html());
		
		var title = $("#news_title").val();
		var image = $("#news_image_url").val();
		var news_html = $(".froala-element").html();
    var type_detail = $(".addselect option:selected").val();          
    var type_detail_id = $(".addselect_datail option:selected").val();


    if (title == ""){
            alert('请填写新闻标题');
            return false;
        }

    if (image == ""){
        alert('请添加新闻图片');
        return false;
    }

    if (news_html == ""){
        alert('请填写新闻内容');
        return false;
    }

		params = {
			"news_html":news_html,
			"image":image,
			"title":title,
      "type_detail":type_detail,
      "type_detail_id":type_detail_id,

		}
		
		$.ajax({			
			url:"/app/news/write",
			type:"POST",
            data:JSON.stringify(params),
            contentType:'application/json',
			success:function(res){
                if(res.status == 0){
					alert("新闻添加成功");
                    location.href="/app/show/news_list";
                }else {
                    alert(res.msg);
                }
            }
		
		});
	})

  $("#turnback").on("click",function(){
    
    location.href="/app/show/news_list";
  });

  </script>
</body>


</html>
